import { CurdappAccount } from '@project/anchor'
import { ellipsify, UiWalletAccount } from '@wallet-ui/react'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { AppExplorerLink } from '@/components/app-explorer-link'
import { CurdappUiButtonClose } from './curdapp-ui-button-close'
import { CurdappUiButtonDecrement } from './curdapp-ui-button-decrement'
import { CurdappUiButtonIncrement } from './curdapp-ui-button-increment'
import { CurdappUiButtonSet } from './curdapp-ui-button-set'

export function CurdappUiCard({ account, curdapp }: { account: UiWalletAccount; curdapp: CurdappAccount }) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Curdapp: {curdapp.data.count}</CardTitle>
        <CardDescription>
          Account: <AppExplorerLink address={curdapp.address} label={ellipsify(curdapp.address)} />
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div className="flex gap-4 justify-evenly">
          <CurdappUiButtonIncrement account={account} curdapp={curdapp} />
          <CurdappUiButtonSet account={account} curdapp={curdapp} />
          <CurdappUiButtonDecrement account={account} curdapp={curdapp} />
          <CurdappUiButtonClose account={account} curdapp={curdapp} />
        </div>
      </CardContent>
    </Card>
  )
}
